<template>
	<view class="body">
		<xk-header title="保养登记"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>保养单号:  {{data.maintain_no}}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">设备信息：</view>{{data.device_code}}-{{data.device_name}}</view>
					<view class="info-item"><view class="key">保养事项：</view>{{data.standard_name}}</view>
					<view class="info-item"><view class="key">保养时段：</view>{{data.plan_start_date}}至{{data.plan_end_date}}</view>
					<view class="info-item"><view class="key">保养工时：</view>{{data.plan_partorls_time}}分钟</view>
					<view v-if="data.confirm_proposal" class="info-item"><view class="key">确认意见：</view><text>{{data.confirm_proposal}}</text></view>
					<view v-if="data.check_result" class="info-item"><view class="key">抽查意见：</view><text>{{data.check_result}}</text></view>
				</view>
			</view>
		</view>
		<swiper class="swiper" :style="'height:'+swiperHeight + 'px'" :current="current"
		 :duration="duration" @change="swiperTab">
			<swiper-item v-for="(item, index) in data.dets" :key="index">
				<view class="swiper-item">
					<view class="swiper-info" style="margin-top: 20rpx;">
						<view class="title">
							<view>保养明细</view>
							<view class="right-title">
								共<view style="margin: 0 6rpx;color: #2C72FF;">{{lengthData}}</view>个保养项
							</view>
						</view>
						<view class="sub-title">{{index + 1}}/{{lengthData}} 保养项</view>
						<view class="content">
							<text>
								{{item.partorls_content}}
							</text>
						</view>
						<view class="result-item">
							<view>是否操作</view>
							<radio-group @change="(e)=>{data.dets[index].is_comply = e.detail.value}" class="radio">
								<view class="r-item" style="margin-right: 140rpx;">
									<radio value="1"></radio>
									<view style="margin-left: 20rpx;">是</view>
								</view>
								<view class="r-item">
									<radio value="0"></radio>
									<view style="margin-left: 20rpx;">否</view>
								</view>
							</radio-group>
						</view>
						<view class="handle-btn">
							<view v-if="index != 0" @click="()=>{current--}">上一项</view>
							<view v-if="index != lengthData - 1" @click="()=>{current++}">下一项</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="from-item"  style="margin-top: 20rpx;">
			<view class="title">保养记录</view>
			<textarea v-model="formData.maintain_remark" type="text" placeholder="在此输入巡查保养记录" placeholder-class="placeholder"/>
		</view>
		<view class="from-item upload-img-item">
			<view class="title">上传保养照片</view>
			<upload-image :images="data.dets.maintain_image" @onChange="(images) => {formData.maintain_image = images}"/>
		</view>

		<view class="common-bottom-view">
			<view class="common-btn" @click="finishPatrol">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maintainId: '',
				data: {
				},
				orderMore: true,
				swiperHeight: 624,
				touchable: true, //禁止手指滑动切换
				duration: 500, //滑动时长
				current: 0, //当前显示的下标
				formData:{
					maintain_image: '',
					maintain_remark: '',
				},
				lengthData:'',
			};
		},
		onLoad(options) {
			this.maintainId = options.maintainId
			this.getData();
		},
		onShow(){
			this.setSwiperHeight()
		},
		methods:{
			getData(){
				this.$api.baseData_getPdMaintainTask(this.maintainId).then((res)=>{
					this.data = res.task
					this.lengthData=res.task.dets.length
					// console.log('this.data',res.task.dets.length)
				})
			},
			swiperTab(e) {
				this.current = parseInt(e.target.current);
				this.setSwiperHeight()
			},
			setSwiperHeight() {
				this.$util.getElRect('.swiper-item').then(res=>{
					// console.log(res)
					this.swiperHeight = res.height;
				})
			},
			finishPatrol(){
				let isFinish = true;
				let isErrorNoDesc = false;
				this.data.dets.is_comply
				// console.log('this.data.dets.is_comply',this.data.dets.is_comply)
				for(let item of this.data.dets){
					// console.log('this.data.dets',this.data)
					if(item.is_comply === null || item.is_comply === ''){
						// console.log('this.data.dets.is_comply',this.data.dets.is_comply)
						isFinish = false;
						break;
					}
					// console.log('=====',item.is_comply)
					if(item.is_comply === '0' && !this.formData.maintain_remark){
						isErrorNoDesc = true;
						isFinish = false;
						break;
					}
				}
				if(!isFinish){
					if(isErrorNoDesc){
						// console.log('isErrorNoDesc',isErrorNoDesc)
						this.$util.alert({
							content: "存在未操作项目，请填写保养记录描述原因",
						})
					}else{
						this.$util.alert({
							content: "存在未操作项目，无法完成提交",
						})
					}
					return
				}

				this.$util.confirm({
					content: "确定提交完成保养？",
					confirmText: "完成保养"
				}).then(isConfirm => {
					if (isConfirm) {
						let detsData = [];
						// let remark = '';
						for(let item of this.data.dets){
							detsData.push({
								maintain_det_id: item.maintain_det_id,
								is_comply: item.is_comply,
							})
						}
						this.$util.post({
							url: "app/pdMaintainTask/register",
							data: {
								dets: detsData,
								maintain_remark: this.formData.maintain_remark,
								maintain_image: this.formData.maintain_image,
								maintain_id: this.maintainId,
								isSubmit: true
							}
						}).then(res => {
							uni.$emit('refreshHomeDataList')
							uni.$emit('refreshMaintainTask')
							uni.redirectTo({
								url: '/pagesA/facility-upkeep/facility-upkeep-finish?type=done'
							})
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss">
@import '@/common/from.scss';
.result-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	.radio{
		display: flex;
		.r-item{
			display: flex;
			align-items: center;

			margin-right: 40rpx;
		}
	}
}

</style>
